<template>
  <el-drawer v-model="drawerFlag" direction="rtl">
    <template #header>菜单编辑</template>
    <template #default>
      <el-form :model="formModel" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="父菜单" prop="parent_menu_id">
          {{ parentTitle }}
        </el-form-item>
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input v-model="formModel.menu_name"></el-input>
        </el-form-item>
        <el-form-item label="菜单标题名" prop="menu_title">
          <el-input v-model="formModel.menu_title"></el-input>
        </el-form-item>
        <el-form-item label="路由路径" prop="route_path">
          <el-input v-model="formModel.route_path"></el-input>
        </el-form-item>
        <el-form-item label="Vue 文件路径" prop="vue_file_path">
          <el-input v-model="formModel.vue_file_path" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClickBtnCancel">取消</el-button>
        <el-button type="primary" @click="handleClickBtnSubmit">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Dal from '@/dal'
import { ElMessage } from 'element-plus'
import type { ElForm } from 'element-plus'

const emits = defineEmits(['close', 'submited'])
const drawerFlag = ref(false)
const parentTitle = ref('')
const parentRoutePath = ref('')

const formRef = ref<InstanceType<typeof ElForm>>()

const formModel = reactive({
  menu_id: null,
  menu_name: '',
  menu_title: '',
  route_path: '',
  vue_file_path: '',
  parent_menu_id: null,
})

const rules = reactive({
  menu_name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  menu_title: [{ required: true, message: '请输入菜单标题名', trigger: 'blur' }],
  route_path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
  vue_file_path: [{ required: true, message: '请输入 Vue 文件路径', trigger: 'blur' }],
})

const handleClickBtnCancel = () => {
  formRef.value?.resetFields()
  drawerFlag.value = false
}

/**
 * 异步处理按钮点击事件
 */
const handleClickBtnSubmit = async () => {
  await formRef.value?.validate(async (valid) => {
    if (valid) {
      // 这里可以添加提交表单数据到后端的逻辑
      let res: any = null
      if (formModel.menu_id) {
        // 编辑
        res = await Dal.Menus.update(formModel)
      } else {
        res = await Dal.Menus.create(formModel)
        // console.log('表单数据：', formModel)
      }

      console.log('res', res)
      // 假设提交成功后给用户提示
      ElMessage({
        message: '提交成功',
        type: 'success',
      })
      emits('submited', { ...formModel })
    } else {
      console.log('表单验证失败')
    }
  })

  drawerFlag.value = false
}

const open = async (data: any, parent: any = null) => {
  drawerFlag.value = true
  if (data.parent_menu_id > 0 && parent) {
    parentTitle.value = parent.menu_title
    parentRoutePath.value = `${parent.route_path}/`
    formModel.parent_menu_id = data.parent_menu_id
  } else {
    formModel.parent_menu_id = null
  }
  const item = await Dal.Menus.findById(data.parent_menu_id)
  // console.log('item', item)
  if (item && item.data) {
    parentTitle.value = item.data.menu_title
    formModel.parent_menu_id = item.data.menu_id
  }

  // console.log('data', data.parent_menu_id)
  if (data.menu_id) {
    formModel.menu_id = data.menu_id
    formModel.menu_name = data.menu_name
    formModel.menu_title = data.menu_title
    formModel.route_path = data.route_path
    formModel.vue_file_path = data.vue_file_path
  } else {
    formModel.menu_id = null
    formModel.menu_name = ''
    formModel.menu_title = ''
    formModel.route_path = ''
    formModel.vue_file_path = ''
  }
}

defineExpose({
  open,
})
</script>
